<template>
    <div class="gx-confirm-button">
        <div class="title">
            <i class="el-icon-warning-outline warning-icon"></i>
            {{title || '提示'}}
        </div>
        <div class="content">{{content || '确定执行此操作？'}}</div>
        <div class="buttons">
            <button v-for="(b,idx) in buttons" :key="'cb'+idx" class="confirm-button" :class="b.type" @click="clickBtn(b,idx)">
                {{b.text}}
            </button>
        </div>
    </div>
</template>

<script>
    export default {
        name: "mk-confirm-button",
        props: {
            title: null,
            content: null,
            buttons: {
                type: Array,
                default() {
                    return []
                }
            }
        },
        methods: {
            clickBtn(button, index) {
                this.$emit('close', {index, button});
            }
        },
        mounted() {
            let cls = document.getElementsByClassName('v-dialog-body');
            if (cls && cls.length){
                cls[cls.length-1].style.padding = '0';
            }
        },
        data() {
            return {}
        }
    }
</script>

<style lang="scss">
    .gx-confirm-button {
        display: flex;
        flex-direction: column;
        position: relative;
        min-width: 420px;
        border-radius: 4px;
        overflow: hidden;

        .title {
            background: #fff;
            color: #303133;
            padding: 20px 20px 10px;
            line-height: 24px;
            font-size: 18px;
            display: flex;
            align-items: center;

            .warning-icon {
                color: #E6A23C;
                font-size: 22px;
                margin-right: 10px;
            }
        }

        .content {
            padding: 10px 20px 30px;
            color: #606266;
            font-size: 14px;
            line-height: 1.5;
        }

        .buttons {
            padding: 10px 20px;
            display: flex;
            justify-content: flex-end;
            //background: #f5f7fa;
            //border-top: 1px solid #e4e7ed;

            .confirm-button {
                margin-left: 10px;
                padding: 9px 15px;
                border: 1px solid #dcdfe6;
                border-radius: 4px;
                background: #fff;
                font-size: 12px;
                cursor: pointer;
                transition: .1s;

                &:first-child {
                    margin-left: 0;
                }

                &.primary {
                    color: #fff;
                    background-color: #409eff;
                    border-color: #409eff;

                    &:hover {
                        background: #66b1ff;
                        border-color: #66b1ff;
                    }
                }

                &.success {
                    color: #fff;
                    background-color: #67c23a;
                    border-color: #67c23a;

                    &:hover {
                        background: #85ce61;
                        border-color: #85ce61;
                    }
                }

                &.warning {
                    color: #fff;
                    background-color: #e6a23c;
                    border-color: #e6a23c;

                    &:hover {
                        background: #ebb563;
                        border-color: #ebb563;
                    }
                }

                &.danger {
                    color: #fff;
                    background-color: #f56c6c;
                    border-color: #f56c6c;

                    &:hover {
                        background: #f78989;
                        border-color: #f78989;
                    }
                }

                &:hover {
                    color: #409eff;
                    border-color: #c6e2ff;
                    background-color: #ecf5ff;
                }
            }
        }
    }
</style>
